<template>
	<view class="container">
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex-clz">
			<view class="diygw-form-item diygw-col-20">
				<view class="title"> 企业家名称 </view>
				<view class="input solid">
					<input class="flex1" name="input" comfirm-type="done" type="text" v-model="input" placeholder="请输入提示信息" />
				</view>
			</view>
			<view class="diygw-form-item diygw-col-20">
				<view class="title"> 企业家企业类别 </view>
				<view class="input solid">
					<input class="flex1" name="input2" comfirm-type="done" type="text" v-model="input2" placeholder="请输入提示信息" />
				</view>
			</view>
			<view class="diygw-form-item diygw-col-24 noborder">
				<view class="title"> 企业家简介 </view>
				<view class="input">
					<textarea class="flex1" name="textarea" v-model="textarea" placeholder="请输入提示信息"></textarea>
				</view>
			</view>
			<view class="diygw-form-item diygw-col-24 flex-direction-column">
				<view class="title width-auto diygw-col-24"> 企业家人物或企业头像 </view>
				<view class="input flex flex-wrap">
					<view class="upload" v-for="(item, index) in uploadDatas">
						<image class="image" @tap="previewUpload" :src="item" :data-url="item" mode="aspectFill"></image>
						<text class="diy-icon-close" :data-index="index" @tap="delUpload"></text>
					</view>
					<view class="upload" v-if="uploadDatas.length < 6" @tap="uploadUpload">
						<text class="diy-icon-cameraadd"></text>
					</view>
					<input hidden :value="upload" name="upload" maxlength="-1" />
				</view>
			</view>
			<view class="diygw-form-item diygw-col-24 flex-direction-column">
				<view class="title title-mb5 width-auto diygw-col-24"> 企业家拥有资源 </view>
				<view class="input">
					<checkbox-group class="flex flex-wrap check-green diygw-col-24 justify-between" @change="changeCheckbox" name="checkbox">
						<label v-for="(item, index) in checkboxDatas" class="diygw-checkbox-label">
							<checkbox class="diygw-checkbox" :value="item.value" :checked="item.checked"> </checkbox>
							<view class="diygw-icon-checkbox" :class="item.checked ? 'checked' : ''"></view>
							<view>
								{{ item.label }}
							</view>
						</label>
					</checkbox-group>
					<input hidden type="hidden" name="checkboxLabel" :value="checkboxLabel" />
				</view>
			</view>
			<view class="diygw-form-item diygw-col-20">
				<view class="title"> 联系人 </view>
				<view class="input solid">
					<input class="flex1" name="input4" comfirm-type="done" type="text" v-model="input4" placeholder="请输入提示信息" />
				</view>
			</view>
			<view class="diygw-form-item diygw-col-20">
				<view class="title"> 联系电话 </view>
				<view class="input solid">
					<input class="flex1" name="input3" comfirm-type="done" type="text" v-model="input3" placeholder="请输入提示信息" />
				</view>
			</view>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column diygw-bottom flex1-clz">
			<view class="flex diygw-col-24 button-clz">
				<button class="diygw-btn orange radius flex1 margin-xs button-button-clz">提交认证</button>
			</view>
		</view>
		<view class="version text-grey flex-direction-column flex diygw-col-24 justify-center align-center">
			<view> DIY官网提供技术支持 </view>
			<view> http://www.diygw.com </view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	//create by: 邓志锋 <280160522@qq.com> <https://www.diygw.com> DIYGW可视化设计一键生成源码
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				input: '',
				input2: '',
				textarea: '',
				uploadDatas: [],
				upload: '',
				checkboxDatas: [
					{ value: '1', label: '资金', checked: true },
					{ value: '2', label: '资源', checked: true },
					{ value: '3', label: '经验', checked: false }
				],
				checkbox: ['1', '2'],
				checkboxLabel: `资金,资源`,
				input4: '',
				input3: ''
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {},
			async uploadUpload(e) {
				await this.uploadImage(this, 'upload', 'uploadDatas', '');
			},
			delUpload(evt) {
				let { index } = evt.currentTarget.dataset;
				let Datas = this.uploadDatas;
				Datas.splice(index, 1);
				let upload = uploadDatas.join(',');
				this.uploadDatas = uploadDatas;
				this.upload = upload;
			},
			previewUpload(e) {
				uni.previewImage({
					current: e.currentTarget.dataset.url, // 当前显示图片的http链接
					urls: this.uploadDatas // 需要预览的图片http链接列表
				});
			},
			changeCheckbox(evt) {
				let values = evt.detail.value;
				let checkboxDatas = this.checkboxDatas;
				let checkboxLabels = [];
				let checkbox = [];
				for (var i = 0, len = checkboxDatas.length; i < len; ++i) {
					const item = checkboxDatas[i];

					if (values.includes(item.value)) {
						this.$set(item, 'checked', true);
					} else {
						this.$set(item, 'checked', false);
					}
					if (item['checked']) {
						checkboxLabels.push(item['label']);
						checkbox.push(item['value']);
					}
				}
				let checkboxLabel = checkboxLabels.join(',');
				this.checkboxLabel = checkboxLabel;
				this.checkbox = checkbox;
				this.checkboxDatas = checkboxDatas;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex1-clz {
		left: 0px;
		bottom: 0px;
		width: 60px;
		right: 0px;
	}
	.button-clz {
		margin-left: 5px;
		flex: 1;
		width: calc(100% - 5px - 5px) !important;
		margin-top: 15px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.button-button-clz {
		margin: 3px !important;
	}
	.container {
		padding-left: 0px;
		padding-right: 0px;

		font-size: 12px;
	}
	.container {
	}
</style>
